<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta content="telephone=no" name="format-detection" />
  <!-- 留作将来统一添加 -->
  <TEMPLATE>${TEMPLATE}</TEMPLATE>
  <title>选择-学生-错题集详情</title>
  <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  <link rel="stylesheet" type="text/css" href="../../css/index.css">
  <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
  <style type="text/css">
    body {
      background: rgba(90, 194, 255, 1);
    }

    .wrapper {
      padding: 15px 15px 42px 15px;
    }

    .head {
      height: 188px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 4px 10px 0px rgba(0, 135, 214, 0.37);
      border-radius: 10px;
      margin-bottom: 20px;
    }

    .column {
      min-width: 33.3%;
      height: 188px;
      text-align: center;
    }

    .column .count {
      font-size: 24px;
      font-weight: 500;
      color: rgba(231, 109, 0, 1);
      text-align: center;
    }

    .column .txt {
      font-size: 12px;
      font-weight: 400;
      color: rgba(25, 25, 25, 1);
    }

    .items {
      padding: 10px 11px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 4px 10px 0px rgba(0, 135, 214, 0.37);
      border-radius: 10px;
    }

    .item {
      height: 50px;
      border-bottom: 1px solid rgb(212, 212, 212);
    }

    .item:last-of-type {
      border-bottom: 0;
    }

    .txt {
      font-weight: 500;
      color: rgba(25, 25, 25, 1);
      font-size: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .select {
      min-width: 100px;
      font-size: 15px;
      font-weight: 400;
      color: rgba(191, 191, 191, 1);
    }

    .select img {
      width: 17px;
      height: 16px;
      margin-left: 8px;
    }
  </style>
</head>

<body>
  <div class="vueApp" v-cloak>
    <div class="wrapper">
      <div class="head" data-flex>
        <div class="column" data-flex-box="1" data-flex="cross:center main:center">
          <div>
            <div class="count">10%</div>
            <div class="txt">选择题错误率</div>
            <div class="count" style="margin-top: 31px;">10%</div>
            <div class="txt">判断题错误率</div>
          </div>
        </div>
        <div class="column" data-flex-box="1" data-flex="cross:center main:center">
          <div>
            <div class="count">10%</div>
            <div class="txt">听力题错误率</div>
            <div class="count" style="margin-top: 31px;">10%</div>
            <div class="txt">连线题错误率</div>
          </div>
        </div>
        <div class="column" data-flex-box="1" data-flex="cross:center main:center">
          <div>
            <div class="count">10%</div>
            <div class="txt">填空题错误率</div>
            <div class="count" style="margin-top: 31px;">10%</div>
            <div class="txt">排序题错误率</div>
          </div>
        </div>
      </div>
      <div class="items">
        <div class="item" data-flex="main:justify cross:center">
          <div class="txt" data-flex-box="1">学生一</div>
          <div class="select" data-flex="cross:center main:right">
            <img src="../../image/course/arraw3.png" alt="">
          </div>
        </div>
        <div class="item" data-flex="main:justify cross:center">
          <div class="txt" data-flex-box="1">学生一</div>
          <div class="select" data-flex="cross:center main:right">
            <img src="../../image/course/arraw3.png" alt="">
          </div>
        </div>
        <div class="item" data-flex="main:justify cross:center">
          <div class="txt" data-flex-box="1">学生一</div>
          <div class="select" data-flex="cross:center main:right">
            <img src="../../image/course/arraw3.png" alt="">
          </div>
        </div>
        <div class="item" data-flex="main:justify cross:center">
          <div class="txt" data-flex-box="1">学生一</div>
          <div class="select" data-flex="cross:center main:right">
            <img src="../../image/course/arraw3.png" alt="">
          </div>
        </div>
        <div class="item" data-flex="main:justify cross:center">
          <div class="txt" data-flex-box="1">学生一</div>
          <div class="select" data-flex="cross:center main:right">
            <img src="../../image/course/arraw3.png" alt="">
          </div>
        </div>
        <div class="item" data-flex="main:justify cross:center">
          <div class="txt" data-flex-box="1">学生一</div>
          <div class="select" data-flex="cross:center main:right">
            <img src="../../image/course/arraw3.png" alt="">
          </div>
        </div>
        <div class="item" data-flex="main:justify cross:center">
          <div class="txt" data-flex-box="1">学生一</div>
          <div class="select" data-flex="cross:center main:right">
            <img src="../../image/course/arraw3.png" alt="">
          </div>
        </div>
        <div class="item" data-flex="main:justify cross:center">
          <div class="txt" data-flex-box="1">学生一</div>
          <div class="select" data-flex="cross:center main:right">
            <img src="../../image/course/arraw3.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
  // html 的引号一律为双引号(""),js 为单引号('')
  var USER, $S, vm;
  apiready = function () {
    $S = SERVICE();
    USER = USER();
    console.log(JSON.stringify(api.pageParam) + '=====pageParam');

    fnInit();
  };
  // fnInit();
  // 初始化
  function fnInit() {
    vm = new Vue({
      el: '.vueApp',
      data: {
        info: null,
        listData: [],
        pageNo: 1,
        pageSize: 10
      }
    });
    getPageData();
  }

  function load() {
    getPageData('load');
    fnAddHeaderRefreshingEvent(function () { //设置下拉刷新
      getPageData('headerRefreshing');
    });

    fnAddFooterLoadingEvent(function () { // 设置上拉加载
      getPageData('load');
    });

  }

  // 获取页面数据
  function getPageData(sign) {
    if (sign == 'headerRefreshing') {
      vm.pageNo = 1;
    } else {
      vm.pageNo++;
    }
    var url = '';
    var params = {};
    var callback = function (data) {
      if (vm.pageNo == '1') {
        vm.listData = [];
      }
      var listData = data.listData;
      for (var i = 0; i < listData.length; i++) {
        var item = listData[i];

      }
      vm.listData = vm.listData.concat(data.listData);
      // status 为200时,只返回data
    };
    var error = function (res) {
      // status 不是200时,全部返回
      api.refreshHeaderLoadDone();
    };
    POST(url, params, callback, error);
  }

  // 点击item
  function handleItem(item) {

  }
</script>

</html>